<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-17 12:18:47
 * @LastEditTime: 2024-06-17 18:04:21
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 数据源管理面板
 * @FilePath: \chu-meng\client\src\pages\Design\components\SidebarArea\DataSidebar\index.vue
 * Copyright 版权声明
-->

<template>
  <div class="modWrap">
    <div class="modHead">
      数据源
    </div>
    <div class="handleWrap">
      <a-space>
        <a-button type="primary" size="small" @click="handleCreate">
          <template #icon>
            <PlusOutlined />
          </template>
          新建
        </a-button>
        <a-button type="default" size="small" @click="handleCreate">
          <template #icon>
            <ImportOutlined />
          </template>
          导入
        </a-button>
        <a-button type="default" size="small" @click="handleCreate">
          <template #icon>
            <ExportOutlined />
          </template>
          导出
        </a-button>
      </a-space>
    </div>
    <div class="searchBox">
      <a-input-search
        size="small"
        v-model:value="keyword"
        placeholder="搜索关键词"
        style="width: 100%;"
        @search="onSearch"
      />
    </div>
    <div class="dataList customScrollBar">
      <a-list :loading="loading" size="small" :data-source="dataList">
        <template #renderItem="{ item }">
          <a-list-item>
            <div>
              <div class="title">
                接口名称{{ item }}
              </div>
              <div>接口描述</div>
              <div>
                  <a-tag color="processing">POST</a-tag>
                  <a-tag>接口地址</a-tag>
              </div>
              <div class="actions">
                <a-space>
                  <a-button type="link" @click="handleUpdate(item)">编辑</a-button>
                  <a-popconfirm
                  title="您确定要删除吗？"
                  @confirm="onConfirmDelete"
                  >
                    <a-button type="link" danger>删除</a-button>
                  </a-popconfirm>
                </a-space>
              </div>
            </div>
          </a-list-item>
        </template>
        <template #loadMore>
          <div
            v-if="!initLoading && !loading"
            :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
          >
            <a-button @click="onLoadMore">加载更多</a-button>
          </div>
        </template>
      </a-list>
    </div>
    <CreateDrawer ref="CreateDrawerRef"></CreateDrawer>
  </div>
</template>

<script setup>
import { PlusOutlined, ImportOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { ref, onMounted, nextTick } from 'vue'
import CreateDrawer from './CreateDrawer.vue'

const CreateDrawerRef = ref(null)

const initLoading = ref(true);
const loading = ref(false)

const keyword = ref('')

const dataList = ref([])

// 初始化加载列表
onMounted(() => {
  initLoading.value = false
  dataList.value = [111, 222]
})

// 搜索
const onSearch = () => {
}

// 加载更多
const onLoadMore = () => {
  loading.value = true
  setTimeout(() => {
    dataList.value = dataList.value.concat([333, 444])
    loading.value = false
    nextTick(() => {
      window.dispatchEvent(new Event('resize'))
    })
  }, 500)
}

// 新建数据源
const handleCreate = () => {
  if (CreateDrawerRef.value) {
    CreateDrawerRef.value.onShow({
      type: 'create'
    })
  }
}

// 编辑数据源
const handleUpdate = (row) => {
  if (CreateDrawerRef.value) {
    CreateDrawerRef.value.onShow({
      type: 'update',
      row
    })
  }
}

// 删除数据源
const onConfirmDelete = (row) => {
}

</script>

<style lang="scss" scoped>
.modWrap{
  position: relative;
  height: 100%;
  .modHead{
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 12px;
    background-color: #fafafa;
  }
  .handleWrap{
    padding: 12px;
  }
  .searchBox{
    padding: 0 12px;
  }
  .dataList{
    padding: 0 12px;
    margin-bottom: 24px;
    
    position: absolute;
    top: 120px;
    right: 0;
    bottom: 0;
    left: 0;    
  }
}
</style>
